<template>
	<view class="swiper-view" v-if="list.length>0">
		<uni-swiper-dot :info="list" :current="currentIndex" field="content" :mode="mode" @clickItem='clickItem' :dotsStyles="defaultDotsStyles">
			<swiper class="swiper-view-box" @change="handleChangeItem" :current="currentIndex" :autoplay="true">
				<swiper-item class="swiper-view-box-item" v-for="(item ,index) in list" :key="index">
					<view class="swiper-view-box-item-row" @click="handleClickItem(item)">
						<image :src="item.url" style="height: 100%;width:100%;border-radius: 16rpx;" v-if="item.url">
						</image>
						<view style="background-color: #364d79;width: 100%;height: 100%;border-radius: 16rpx;" v-else>

						</view>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot>
	</view>
</template>

<script setup>
	import {
		getAction
	} from "@/utils/request";
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		Api
	} from "@/utils/Api.js";
	const props = defineProps({
		mainModel: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const currentIndex = ref(0)
	const mode = 'dot'
	const defaultDotsStyles = {
		backgroundColor: '#bbb',
		selectedBackgroundColor: '#ddd',
		selectedBorder: 'none',
		selectedBorder: 'none',
	}
	const url = {
		list: '/m/getCarouselPictureInfo'
	}
	const timer = ref(null)
	const list = ref([])
	const init = async () => {
		const mainModel = props.mainModel || {}
		const res = await getAction(url.list, {
			carouselPictureId: mainModel.carouselPictureId
		})
		list.value = res?.data || []
		list.value.forEach(item => {
			if (item.path) {
				item.url = Api.baseUrl + "/public/" + item.path
			}
		})
		console.log("list.value", list.value)
	}
	const fetch = () => {
		init()
	}
	onMounted(fetch)
	// item change
	const handleChangeItem = (e) => {
		currentIndex.value = e.detail.current
	}
	//dot click
	const clickItem = (e) => {
		console.log('clickItem', e)
		currentIndex.value = e
	}
	// item click
	const handleClickItem = (item) => {
		uni.navigateTo({
			url: `/application/moduleShow?record=${JSON.stringify({
			id: item.docId,
			moduleCode: 'document',
		})}`,
		});
	}
</script>

<style lang="scss" scoped>
	.swiper-view-box-item-row {
		height: 100%;
		border-radius: 16rpx;
		text-align: center;
	}
</style>